<template>
  <a-spin :spinning="confirmLoading">
    <!--    <a-row style="margin-bottom: 20px">-->
    <!--      <a-button v-if="!addVisible"  @click="handleaddInfo" type="primary" icon="plus">新增</a-button>-->

    <!--        <a-button style="margin-left: 10px" @click="handleBoxInfo" type="primary" icon="code-sandbox">箱货信息</a-button>-->

    <!--        <a-button style="margin-left: 10px" @click="handleDeclare" type="primary" icon="file-sync">报关</a-button>-->

    <!--      <a-button style="margin-left: 10px" @click="handleBillMan" type="primary" icon="snippets">提单管理</a-button>-->


    <!--        <a-button style="margin-left: 10px"  @click="handleEnclosure" type="primary" icon="cloud-upload">附件</a-button>-->

    <!--    </a-row>-->
    <a-tabs @tabClick="changeCon" v-model="selectkey">
      <a-tab-pane key="1" tab="基本信息">
        <!--        <a-button type="primary" @click="downForDcwtsWord">订舱委托书下载（Word）</a-button>-->
        <!--        <a-button style="margin-left: 10px" type="primary" @click="downForDcwtsPdf">订舱委托书下载（PDF）</a-button>-->
        <!--        <a-button style="margin-left: 10px" type="primary" @click="downForRhtzsWord">入货通知书下载（Word）</a-button>-->
        <!--        <a-button style="margin-left: 10px" type="primary" @click="downForDfbhWord">电放保函下载（Word）</a-button>-->
        <j-form-container v-if="addVisible" :disabled="formDisabled">
          <a-form :form="form" slot="detail">
            <a-collapse v-model="activeNames" expand-icon-position="right">
              <a-collapse-panel key="1" header="业务信息" :style="customStyle">
                <a-button slot="extra" type="primary" @click="download" icon="download">
                  导出单证
                </a-button>
                <!--                <a-icon slot="extra" type="setting" @click="handleClick" />-->
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['orderNumber',{initialValue: '保存后自动生成'}]" placeholder="请输入订单编号"
                               disabled></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="报价编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['offerNumber',{initialValue: '未引用'}]" placeholder="请输入报价编号"
                               disabled></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="委托单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-select v-decorator="['entrustCompany']"-->
                      <!--                                placeholder="请选择委托单位">-->
                      <!--                        &lt;!&ndash;                        <div slot="dropdownRender" slot-scope="menu">&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <v-nodes :vnodes="menu" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <a-divider style="margin: 4px 0;" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <div&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            style="padding: 4px 8px; cursor: pointer;"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @mousedown="e => e.preventDefault()"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @click="addItem(1)"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          >&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            <a-icon type="plus-circle" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            添加新客户&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          </div>&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                        </div>&ndash;&gt;-->
                      <!--                        <a-select-option v-for="(item, key) in dictOptions" :value="item.value">-->
                      <!--                          {{ item.text }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-select v-decorator="['entrustCompany']" allowClear showSearch
                                placeholder="请选择委托单位">
                        <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                          {{ item.text }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="客户业务编号" :labelCol="labelCol3" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['customerNumber',validatorRules.customerNumberCode]"
                               placeholder="请输入客户业务编号"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="贸易条款" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['tradeClause']" :trigger-change="true"
                                         dictCode="trade_terms"
                                         placeholder="请选择贸易条款" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="托运类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['consignmentType']" placeholder="请输入托运类型"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="服务类型" :labelCol="labelCol1" :wrapperCol="wrapperCol3" style="width: 100%">
                      <j-multi-select-tag type="checkbox" v-decorator="['serviceType']" :trigger-change="true"
                                          dictCode="serve_type" placeholder="请选择服务类型" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="订舱代理" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-select v-decorator="['bookingAgent']" placeholder="请选择订舱代理">-->
                      <!--                        &lt;!&ndash;                        <div slot="dropdownRender" slot-scope="menu">&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <v-nodes :vnodes="menu" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <a-divider style="margin: 4px 0;" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <div&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            style="padding: 4px 8px; cursor: pointer;"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @mousedown="e => e.preventDefault()"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @click="addItem(2)"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          >&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            <a-icon type="plus-circle" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            添加新客户&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          </div>&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                        </div>&ndash;&gt;-->
                      <!--                        <a-select-option v-for="(item, key) in dictOptions" :value="item.value">-->
                      <!--                          {{ item.text }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-select v-decorator="['bookingAgent']" allowClear showSearch
                                placeholder="请选择订舱代理">
                        <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                          {{ item.text }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="国外代理" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-select v-decorator="['foreignAgent']"-->
                      <!--                                placeholder="请选择国外代理">-->
                      <!--                        &lt;!&ndash;                        <div slot="dropdownRender" slot-scope="menu">&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <v-nodes :vnodes="menu" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <a-divider style="margin: 4px 0;" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          <div&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            style="padding: 4px 8px; cursor: pointer;"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @mousedown="e => e.preventDefault()"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            @click="addForeignAgentItem()"&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          >&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            <a-icon type="plus-circle" />&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                            添加国外代理&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                          </div>&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                        </div>&ndash;&gt;-->
                      <!--                        <a-select-option v-for="(item, key) in dictForeignAgentOptions" :value="item.value">-->
                      <!--                          {{ item.text }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-select v-decorator="['foreignAgent']" allowClear showSearch
                                placeholder="请选择国外代理">
                        <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                          {{ item.text }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="合约号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['contractNumber']" placeholder="请输入合约号"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="船公司" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['shipCompany']" :trigger-change="true"
                                         dictCode="ship_company" placeholder="请选择船公司" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="船代" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['shipAgent']" :trigger-change="true"
                                         dictCode="ship_agent"
                                         placeholder="请选择船代" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="货值" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['goodsValue']" placeholder="请输入货值"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="保费" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['premium']" placeholder="请输入保费"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="UN NO." :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['unNo']" placeholder="请输入UN NO."></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="CLASS NO." :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['classNo']" placeholder="请输入CLASS NO."></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="截申报时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择截申报时间" v-decorator="['deadlineDeclaration']"
                              :show-time=true date-format="YYYY-MM-DD HH:mm:ss" :trigger-change="true"
                              style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="装运方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['shipmentMode']" :trigger-change="true"
                                         dictCode="shipmeng_mode"
                                         placeholder="请选择装运方式" />

                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>
              <a-collapse-panel
                key="2"
                header="配舱信息" :style="customStyle"
              >
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="收货地" :labelCol="labelCol1" :wrapperCol="addrwrapper">
                      <a-row>
                        <a-col :span="8">
                          <a-select
                            label-in-value
                            v-decorator="['receiveAddress']"
                            placeholder="选择收货地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangeReceiveAddress"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                  triggerNode => {
                                    return triggerNode.parentNode || document.body;
                                  }
                                "
                          >
                            <a-select-option v-for="d in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="14">
                          <a-input style="width: 100%" placeholder="" v-decorator="['receiveAddressDesc']" />
                        </a-col>
                      </a-row>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-row>
                      <a-col :span="12">
                        <a-row>
                          <a-col :span="10">
                            <a-form-item label="起运港" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                              <a-select
                                label-in-value
                                v-decorator="['portDeparture',{initialValue: {value:'CNTAO',key:'CNTAO'}}]"
                                placeholder="选择起运港"
                                style="width: 100%"
                                :filter-option="false"
                                show-search
                                allowClear
                                @search="searchPort"
                                @select="portDataChangePol"
                                :dropdownMatchSelectWidth="false"
                                :getPopupContainer="
                                  triggerNode => {
                                    return triggerNode.parentNode || document.body;
                                  }
                                "
                              >
                                <a-select-option v-for="d in portData" :value="d.value">
                                  {{ d.text }}
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="14">
                            <a-form-item label="" :wrapperCol="wrapperCol2">
                              <a-input v-decorator="['polRemark']" placeholder=""></a-input>
                            </a-form-item>
                          </a-col>
                        </a-row>

                      </a-col>
                      <a-col :span="12">
                        <a-row>
                          <a-col :span="10">
                            <a-form-item label="卸货港" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                              <a-select
                                label-in-value
                                v-decorator="['portDestination']"
                                placeholder="选择卸货港"
                                style="width: 100%"
                                :filter-option="false"
                                show-search
                                allowClear
                                @search="searchPort"
                                @select="portDataChangePod"
                                :dropdownMatchSelectWidth="false"
                                :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                              >
                                <a-select-option v-for="d in portData" :value="d.value">
                                  {{ d.text }}
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="14">
                            <a-form-item label="" :wrapperCol="wrapperCol2">
                              <a-input v-decorator="['podRemark']" placeholder=""></a-input>
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="交货地" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-decorator="['placeDelivery']"
                            placeholder="交货地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceDelivery"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                                          triggerNode => {
                                                            return triggerNode.parentNode || document.body;
                                                          }
                                                        "
                          >
                            <a-select-option v-for="d in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="14">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-decorator="['placeDeliveryDesc']" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="目的地" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-decorator="['destination']"
                            placeholder="目的地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceDestination"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                                          triggerNode => {
                                                            return triggerNode.parentNode || document.body;
                                                          }
                                                        "
                          >
                            <a-select-option v-for="d in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="14">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-decorator="['destinationDesc']" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="场站" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['station']" :trigger-change="true"
                                         dictCode="station_code"
                                         placeholder="请选择场站" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="报关行" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['customsBroker']" :trigger-change="true"
                                         dictCode="customsBroker_code"
                                         placeholder="请选择报关行" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="货物标示" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['goodsMark']" :trigger-change="true"
                                         dictCode="goods_mark"
                                         placeholder="请选择货物标示" />
                    </a-form-item>
                  </a-col>
                  <!--                  <a-col :span="8">-->
                  <!--                    <a-form-item label="中转港代码" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
                  <!--                      <a-input v-decorator="['transferPortCode']" placeholder="请输入中转港代码"></a-input>-->
                  <!--                    </a-form-item>-->
                  <!--                  </a-col>-->
                  <a-col :span="8">
                    <a-form-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol">

                      <j-dict-select-tag type="list" v-decorator="['wareHouse']" :trigger-change="true"
                                         dictCode="ship_warehouse"
                                         placeholder="请选择仓库" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="箱量" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['boxSize']" placeholder="请输入箱量"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :span="20">
                    <a-form-item label="箱型" :labelCol="labelCol1" :wrapperCol="wrapperCol3">
                      <div v-for="(typeItem,i) in typeList">
                        <j-dict-select-tag type="list" v-model="typeItem.type"
                                           dictCode="box_type	"
                                           placeholder="请选择箱型" style="width: 160px" />
                        <a-input-number style="margin-left: 10px" :min="1" :max="100000" v-model="typeItem.number" />

                        <j-dict-select-tag style="margin-left: 10px;width:150px" v-model="typeItem.source"
                                           default-value="COC"
                                           dictCode="box_source"
                                           showSearch="false"
                                           placeholder="请选择箱来源" />

                        <a-icon
                          v-if="typeList.length >1"
                          style="margin-left: 10px"
                          class="dynamic-delete-button"
                          type="minus-circle-o"
                          @click="removeType(i)"
                        />
                        <a-button v-if="typeList.length - 1 == i" type="dashed"
                                  style="margin-left: 10px;width: 100px;color: darkgreen" @click="addType(typeItem)">
                          <a-icon type="plus" />
                          增加
                        </a-button>
                      </div>
                    </a-form-item>

                  </a-col>


                  <a-col :span="8">
                    <a-form-item label="ETD" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择时间" v-decorator="['etd']"
                              date-format="YYYY-MM-DD" :trigger-change="true" style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="截单时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择截单时间" v-decorator="['cutOffTime']"
                              date-format="YYYY-MM-DD" :trigger-change="true"
                              style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="截关时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择截关时间" v-decorator="['cutCheTime']"
                              date-format="YYYY-MM-DD" :trigger-change="true"
                              style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="截港时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择截港时间" v-decorator="['closingTime']"
                              date-format="YYYY-MM-DD" :trigger-change="true"
                              style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="主单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input style="width: 150px" v-decorator="['mainOffNumber']" placeholder="请输入主单号"></a-input>
                      <a-button style="width: 80px;margin-left: 10px" type="primary" @click="showMainOff">
                        <a-icon type="plus" />
                        加拼
                      </a-button>

                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="分单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input style="width: 150px" v-decorator="['otherOffNumber']" placeholder="请输入分单号"></a-input>
                      <a-button style="width: 80px;margin-left: 10px" type="primary" @click="showOtherOff">
                        <a-icon type="plus" />
                        加拼
                      </a-button>

                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="船名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['shipName']" placeholder="请输入船名"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="航次" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['voyageNumber']" placeholder="请输入航次"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="码头" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['wharf']" placeholder="请输入码头"></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>
              <a-collapse-panel
                key="3"
                header="委托详细信息" :style="customStyle"
              >
                <a-row>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">发货人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择发货人" labelInValue @change="fChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-decorator="['consignor']" placeholder="请输入发货人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">收货人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择收货人" labelInValue @change="sChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-decorator="['consignee']" placeholder="请输入收货人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">通知人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择通知人" labelInValue @change="tChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-decorator="['notifier']" placeholder="请输入通知人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">第二通知人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择第二通知人" labelInValue @change="deChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-decorator="['secNotifier']" placeholder="请输入第二通知人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">国外代理：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择国外代理" labelInValue @change="gwChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-decorator="['formForeignAgent']" placeholder="请输入国外代理"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="唛头" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-decorator="['shipMarks']" placeholder="请输入唛头"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="货物描述" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-decorator="['enName',{initialValue: 'SHIPPER\'S LOAD COUNT&SEAL\n'+
'SAID TO CONTAIN'}]" placeholder="SHIPPER'S LOAD COUNT&SEAL
SAID TO CONTAIN"></a-textarea>

                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="委托总件数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input-group>
                        <a-input-number
                          v-decorator="['total']"
                          style="width:60%"
                          placeholder="总件数"
                          step="0.01"
                          @blur="handleBlur"
                        />
                        <j-dict-select-tag style="width: 40%;" type="list"
                                           v-decorator="['totalType']" :trigger-change="true"
                                           dictCode="total_type"
                                           @change="totalCapChange"
                                           placeholder="请选择" />

                      </a-input-group>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="委托总毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['totalGrossWeight']" placeholder="请输入总毛重" type="number"
                               suffix="KGS"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="委托总体积" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['totalVolume']" placeholder="请输入总体积" type="number" suffix="CBM"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :span="8">
                    <a-form-item label="总件数大写" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['totalCap']" placeholder="请输入件数大写"></a-input>

                    </a-form-item>
                  </a-col>

                  <a-col :span="8">
                    <a-form-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['payType']" :trigger-change="true"
                                         dictCode="pay_type"
                                         placeholder="请选择付款方式" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="运输条款" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['transportClause']" :trigger-change="true"
                                         dictCode="transport_clause"
                                         placeholder="请选择运输条款" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="签单方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-decorator="['formLading']" :trigger-change="true"
                                         dictCode="form_lading"
                                         placeholder="请选择签单方式" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="签单日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择签单日期" v-decorator="['signBillTime']"
                              date-format="YYYY-MM-DD" :trigger-change="true"
                              style="width: 100%" />
                    </a-form-item>
                  </a-col>


                  <a-col :span="8">
                    <a-form-item label="签单地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['signBillAddress']" placeholder="请输入签单地点"></a-input>

                    </a-form-item>
                  </a-col>

                  <a-col :span="8">
                    <a-form-item label="提单份数" :labelCol="labelCol" :wrapperCol="wrapperCol">

                      <j-dict-select-tag type="list" v-decorator="['numberOfBill']" :trigger-change="true"
                                         dictCode="ship_number"
                                         placeholder="请选择提单份数" />

                    </a-form-item>
                  </a-col>

                  <a-col :span="24"></a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="预付地点" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-decorator="['prepaidAt']"
                            placeholder="预付地点"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlacePrepaidAt"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                                          triggerNode => {
                                                            return triggerNode.parentNode || document.body;
                                                          }
                                                        "
                          >
                            <a-select-option v-for="d in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="14">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-decorator="['prepaidAtDesc']" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="到付地点" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-decorator="['arrivalPlace']"
                            placeholder="到付地点"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceArrivalPlace"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                                        triggerNode => {
                                                          return triggerNode.parentNode || document.body;
                                                        }
                                                      "
                          >
                            <a-select-option v-for="d in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="14">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-decorator="['arrivalPlaceDesc']" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </a-collapse-panel>
              <a-collapse-panel
                key="4"
                header="备注信息" :style="customStyle"
              >
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="订舱备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-decorator="['bookingRemarks']" placeholder="请输入订舱备注"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="配舱备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-decorator="['allocationRemarks']" placeholder="请输入配舱备注"></a-textarea>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>

              <a-collapse-panel
                key="5"
                header="箱信息" :style="customStyle"
              >
                <a-tabs default-active-key="1">
                  <a-tab-pane key="1" tab="箱列表">
                    <j-vxe-table
                      ref="vTable"
                      toolbar
                      row-number
                      row-selection
                      drag-sort
                      keep-source
                      :height="350"
                      :dataSource="boxInfo.boxList"
                      :columns="columns2"
                      style="margin-top: 8px;"
                      bordered
                    >
                      <template v-slot:toolbarSuffix>
                        <a-button @click="getStationData" ghost type="primary" icon="login">引入场站数据</a-button>
                        <a-button @click="showStationData" icon="container">查看场站数据</a-button>
                        <!-- http://www.sdsmartlogistics.com/FindClass/YD_BLQueryGrid.aspx?blno=2929465002 -->
                        <a-tag color="orange">目前只支持捷丰场站的数据引入</a-tag>
                      </template>
                      <!--                      <template v-slot:boxnum="props">-->
                      <!--                        <div style="width: 160px">-->
                      <!--                          <a-select v-model="props.row.boxnum"-->
                      <!--                                    :allowClear=true-->
                      <!--                                    placeholder="请选择">-->
                      <!--                            <a-select-option v-for="(item, key) in boxDictOptions" :disabled="item.status" :key="key"-->
                      <!--                                             :value="item.value">-->
                      <!--                              {{ item.text }}-->
                      <!--                            </a-select-option>-->
                      <!--                          </a-select>-->
                      <!--                        </div>-->
                      <!--                      </template>-->
                      <template v-slot:jiangshu="props">
                        <div style="width: 160px">
                          <a-auto-complete allowClear v-model="props.row.jsbz" placeholder=""
                                           :dataSource="boxJsOptions" :filterOption="boxJsFilterOption" />
                        </div>
                      </template>


                    </j-vxe-table>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="进仓信息">

                    <a-row style="height: 300px;">
                      <a-col :span="8">
                        <a-form-item label="进仓件数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input type="number" style="width: 80px" v-model="boxInfo.pieceNumber"
                                   placeholder="0"></a-input>
                          <j-dict-select-tag style="width: 150px;margin-left: 5px" type="list"
                                             v-model="boxInfo.pieceNumberUnit"
                                             dictCode="total_type"
                                             placeholder="请选择" />

                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="进仓毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input type="number" v-model="boxInfo.totalWeight" placeholder="0" suffix="KGS"></a-input>
                        </a-form-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-item label="进仓体积" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input type="number" v-model="boxInfo.totalVolume" placeholder="0" suffix="CBM"></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-tab-pane>

                </a-tabs>

              </a-collapse-panel>

              <a-collapse-panel
                key="6"
                header="内部信息" style="margin-bottom: 50px"
              >
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="操作人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-input v-decorator="['operator',{initialValue: userName},validatorRules.operatorCode]"-->
                      <!--                               placeholder="请输入操作人员"></a-input>-->
                      <j-dict-select-tag type="list"
                                         v-decorator="['operator']"
                                         dictCode="operator" :triggerChange="true"
                                         placeholder="请选择操作人员"
                                         :getPopupContainer="node => node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="业务人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-input v-decorator="['busPersonnel',{initialValue: userName},validatorRules.busPersonnelCode]"-->
                      <!--                               placeholder="请输入业务人员"></a-input>-->
                      <j-dict-select-tag type="list"
                                         v-decorator="['busPersonnel']" :triggerChange="true"
                                         dictCode="business_people"
                                         placeholder="请选择业务人员"
                                         :getPopupContainer="node => node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="客服人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <!--                      <a-input-->
                      <!--                        v-decorator="['cusServiceStaff',{initialValue: userName},validatorRules.cusServiceStaffCode]"-->
                      <!--                        placeholder="请输入客服人员"></a-input>-->
                      <j-dict-select-tag type="list"
                                         v-decorator="['cusServiceStaff']" :triggerChange="true"
                                         dictCode="customer_service_staff"
                                         placeholder="请选择客服人员"
                                         :getPopupContainer="node => node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-collapse-panel>
            </a-collapse>
          </a-form>


        </j-form-container>
        <div style="margin-top: 30px"></div>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="allclose">
            关闭
          </a-button>
          <a-button v-if="isshowdetail" type="primary" @click="saveForm">
            保存
          </a-button>
        </div>

      </a-tab-pane>
      <a-tab-pane v-if="ishowMore" key="6" tab="费用明细">
        <expense-entry-form v-if="expenseVisible" @isEditFunctino="isEditFunctino" ref="expenseEntryForm"
                            @allclose="allclose"
                            @allOk="allOk"></expense-entry-form>

      </a-tab-pane>
      <a-tab-pane v-if="ishowMore" key="2" tab="箱货信息">
        <box-type-form v-if="boxModalVisible" @isEditFunctino="isEditFunctino" ref="boxTypeForm" @allclose="allclose"
                       @allOk="allOk"></box-type-form>

      </a-tab-pane>
      <a-tab-pane v-if="ishowMore" key="3" tab="报关">
        <declare-form v-if="declareVisible" @isEditFunctino="isEditFunctino" ref="declareForm" @allclose="allclose"
                      @allOk="allOk"></declare-form>

      </a-tab-pane>
      <a-tab-pane v-if="ishowMore" key="4" tab="提单管理">
        <bill-manage-form v-if="billVisible" @isEditFunctino="isEditFunctino" ref="billManageForm" @allclose="allclose"
                          @allOk="allOk"></bill-manage-form>

      </a-tab-pane>
      <a-tab-pane v-if="ishowMore" key="5" tab="附件">
        <Enclosure-form v-if="enclosureVisible" ref="enclosureForm" @allclose="allclose"
                        @allOk="allOk"></Enclosure-form>

      </a-tab-pane>
      <template slot="tabBarExtraContent">
        <a-icon type="close" @click="allclose" />
        <!--        <div style="margin-right: 10px;color: rgba(0, 0, 0, 0.45);font-size:20px;font-weight: 300;cursor: pointer" >X</div>-->
      </template>
    </a-tabs>

    <a-modal v-model="mainNumberVisible" title="主单号加拼" ok-text="确认" cancel-text="取消" @ok="hideModal">

      <a-select mode="tags" style="width: 100%" v-model="mainNum" placeholder="请输入主单号"
      >

      </a-select>
    </a-modal>
    <a-modal v-model="otherNumberVisible" title="分单号加拼" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <a-select mode="tags" style="width: 100%" v-model="otherNum" placeholder="请输入分单号"
      >

      </a-select>
    </a-modal>
    <!--    <a-modal-->
    <!--      title="添加新客户"-->
    <!--      :visible="customerModalVisible"-->
    <!--      :maskClosable="false"-->
    <!--      :confirm-loading='confirmLoading'-->
    <!--      @ok="addHandleOk"-->
    <!--      @cancel="addHandleCancel"-->
    <!--    >-->
    <!--      <a-input placeholder="请输入新客户公司抬头" v-model="newCustomerTitle" :allowClear=true></a-input>-->
    <!--    </a-modal>-->
    <!--    <a-modal-->
    <!--      title="添加国外代理"-->
    <!--      :visible="foreignAgentModalVisible"-->
    <!--      :maskClosable="false"-->
    <!--      :confirm-loading='confirmLoading'-->
    <!--      @ok="addHandleOkGys"-->
    <!--      @cancel="addHandleCancelGys"-->
    <!--    >-->
    <!--      <a-input placeholder="请输入国外代理" v-model="newForeignAgentTitle" :allowClear=true></a-input>-->
    <!--    </a-modal>-->

    <a-modal v-model="selectDownVisible" title="导出单证" ok-text="确认" cancel-text="取消" @ok="hideDownModal">
      <div>
        选择公司：
        <a-select v-model="downcom" style="width: 300px">
          <a-select-option value="1">
            青岛大金汇国际货运有限公司
          </a-select-option>
          <a-select-option value="2">
            青岛海那威尔物流有限公司
          </a-select-option>
        </a-select>
      </div>
      <div>
        文件类型：
        <a-select default-value="0" v-model="downfilename" style="width: 300px;margin-top: 15px;margin-bottom: 15px">

          <a-select-option value="0">
            订舱委托书
          </a-select-option>
          <a-select-option value="1">
            入货通知书
          </a-select-option>
          <a-select-option value="2">
            电放保函
          </a-select-option>
        </a-select>
      </div>
      <!--      <div>-->
      <!--        导出类型：-->
      <!--        <a-select v-model="downfiletype" style="width: 300px">-->

      <!--          <a-select-option value="0">-->
      <!--            Word(*.docx)-->
      <!--          </a-select-option>-->
      <!--          <a-select-option value="1">-->
      <!--            PDF-->
      <!--          </a-select-option>-->
      <!--        </a-select>-->
      <!--      </div>-->
    </a-modal>
  </a-spin>

</template>

<script>

import { downFile, getAction, httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import DeclareForm from './DeclareForm'
import BillManageForm from './BillManageForm'
import BoxTypeForm from './BoxTypeForm'
import EnclosureForm from './EnclosureForm'
import ExpenseEntryForm from './ExpenseEntryForm'
import Vue from 'vue'
import { ajaxGetDictItems } from '@api/api'
import JAreaLinkage from '@/components/jeecg/JAreaLinkage'

import { JVXETypes } from '@/components/jeecg/JVxeTable'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import { getDictItems } from '@comp/dict/JDictSelectUtil'

export default {

  name: 'ShipExportForm',
  components: {
    JSearchSelectTag,
    JFormContainer,
    JDate,
    JDictSelectTag,
    JMultiSelectTag,
    DeclareForm,
    BillManageForm,
    BoxTypeForm,
    EnclosureForm,
    ExpenseEntryForm,
    JAreaLinkage
    // VNodes: {
    //   functional: true,
    //   render: (h, ctx) => ctx.props.vnodes
    // }
  },
  // props: {
  //   //流程表单data
  //   formData: {
  //     type: Object,
  //     default: () => {
  //     },
  //     required: false
  //   },
  //   //表单模式：true流程表单 false普通表单
  //   formBpm: {
  //     type: Boolean,
  //     default: false,
  //     required: false
  //   },
  //   //表单禁用
  //   disabled: {
  //     type: Boolean,
  //     default: false,
  //     required: false
  //   }
  // },
  data() {
    return {
      boxJsOptions: [],
      portData: [],//港口数据
      getPortDataUrl: '/box/dictPort/findbyname',
      boxDictOptions: [],
      selectDownVisible: false,
      downcom: '1',
      downfilename: '0',
      // downfiletype: '0',
      columns2: [
        {
          title: '箱型',
          key: 'boxtype',
          type: JVXETypes.select,
          allowSearch: true,
          width: '180px',
          options: [],
          dictCode: 'box_type',
          placeholder: '请选择',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '箱量',
          key: 'boxl',
          type: JVXETypes.inputNumber,
          width: '180px',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '箱号',
          key: 'boxnum',
          type: JVXETypes.input,
          width: '180px'
          // slotName: 'boxnum',
          // validateRules: [{ required: true, message: '${title}不能为空' }]
          // dictCode: 'jzx_info,container_number,id,sys_org_code=\'' + Vue.ls.get('Login_Userinfo').orgCode + '\''

        },
        {
          title: '封号',
          key: 'title',
          type: JVXETypes.input,
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}'
        },

        {
          title: '件数',
          key: 'js',
          type: JVXETypes.input,
          width: '180px'
        },
        {
          title: '件数包装',
          key: 'jsbz',
          type: JVXETypes.slot,
          slotName: 'jiangshu',
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}'
        },
        {
          title: '重量',
          key: 'weight',
          type: JVXETypes.input,
          width: '180px'
        },
        {
          title: '尺码',
          key: 'cm',
          type: JVXETypes.input,
          width: '180px'
        }
        //
        // {
        //   title: '箱皮重',
        //   key: 'kgsweight',
        //   type: JVXETypes.inputNumber,
        //   width: '180px'
        // },
        // {
        //   title: '参考重量',
        //   key: 'ckweight',
        //   type: JVXETypes.inputNumber,
        //   width: '180px'
        // }
      ],

      boxInfo: {
        boxList: [],
        pieceNumber: '',
        pieceNumberUnit: '',
        totalWeight: '',
        totalVolume: '',
        deleteBoxNumIds: ''
      },
      selectkey: '1',
      isEdit: false,
      record: null,
      modelid: '',
      formDisabled: false,
      isshowdetail: true,
      ssq: {
        areaLinkage1: '110105',
        areaLinkage2: '140221',
        sex: 1
      },
      ishowMore: false,
      mainNum: [],
      otherNum: [],
      consignor: {
        name: '',
        address1: '',
        address2: '',
        address3: '',
        city: '',
        province: '',
        countryCode: '',
        postCode: '',
        phone: '',
        codeType: '',
        enterpriseCode: '',
        email: ''
      },
      consignee: {
        name: '',
        address1: '',
        address2: '',
        address3: '',
        city: '',
        province: '',
        countryCode: '',
        postCode: '',
        phone: '',
        codeType: '',
        enterpriseCode: '',
        email: ''
      },
      notifier: {
        name: '',
        address1: '',
        address2: '',
        address3: '',
        city: '',
        province: '',
        countryCode: '',
        postCode: '',
        phone: '',
        codeType: '',
        enterpriseCode: '',
        email: ''
      },
      secNotifier: {
        name: '',
        address1: '',
        address2: '',
        address3: '',
        city: '',
        province: '',
        countryCode: '',
        postCode: '',
        phone: '',
        codeType: '',
        enterpriseCode: '',
        email: ''
      },
      disable: false,
      mainNumberVisible: false,
      otherNumberVisible: false,
      // dictOptions: [],
      companyData: [],
      customerModalVisible: false,
      newCustomerTitle: '',
      addVisible: true,
      addCustomerFlag: 0,

      // dictForeignAgentOptions: [],
      newForeignAgentTitle: '',
      foreignAgentModalVisible: false,
      enclosureVisible: false,
      expenseVisible: false,
      boxModalVisible: false,
      declareVisible: false,
      billVisible: false,
      activeNames: [1, 2, 3, 4, 5, 6],
      selectNames: ['1', '2', '3', '4', '5', '6'],
      typeList: [{}],
      form: this.$form.createForm(this),
      userName: '',
      customStyle:
        '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      labelCol3: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      labelCol4: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      labelCol5: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      addrcol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      addrwrapper: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol5: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 23 }
      },
      wrapperCol3: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      confirmLoading: false,
      validatorRules: {
        entrustCompanyCode: {
          rules: [
            { required: true, message: '请选择委托单位!' }
          ]
        },
        customerNumberCode: {
          rules: [
            { required: true, message: '请选择客户业务编号!' }
          ]
        },
        operatorCode: {
          rules: [
            { required: true, message: '请输入操作人员!' }
          ]
        },
        busPersonnelCode: {
          rules: [
            { required: true, message: '请输入业务人员!' }
          ]
        },
        cusServiceStaffCode: {
          rules: [
            { required: true, message: '请输入客服人员!' }
          ]
        }
      },
      url: {
        add: '/box.ship/shipInfo/add',
        edit: '/box.ship/shipInfo/edit',
        queryById: '/box.ship/shipInfo/queryById',
        wtsWord: '/ship.export/wts/word',
        wtsPdf: '/ship.export/wts/pdf',
        rhtzsWord: '/ship.export/rhtzs/word',
        rhtzsPdf: '/ship.export/rhtzs/pdf',
        dfbhWord: '/ship.export/dfbh/word',
        dfbhPdf: '/ship.export/dfbh/pdf'
      },
      shoufatongData: []
    }
  },
  computed: {
    // formDisabled() {
    //   if (this.formBpm === true) {
    //     if (this.formData.disabled === false) {
    //       return false
    //     }
    //     return true
    //   }
    //   return this.disabled
    // },
    // showFlowSubmitButton() {
    //   if (this.formBpm === true) {
    //     if (this.formData.disabled === false) {
    //       return true
    //     }
    //   }
    //   return false
    // }
  },
  created() {
    //如果是流程中表单，则需要加载流程表单data
    // this.showFlowData()
    this.initDictData()
    // this.initFromData();
  },
  methods: {

    download(event) {
      event.stopPropagation()
      this.selectDownVisible = true
    },
    hideDownModal() {

      // <a-select-option value="0">
      //   订舱委托书
      // </a-select-option>
      // <a-select-option value="1">
      //   入货通知书
      // </a-select-option>
      // <a-select-option value="2">
      //   电放保函
      // </a-select-option>
      if (this.downfilename == 0) {
        window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/4ef3a4d9e5af7499eda7382afc83e6e0?id=' + this.model.id + '&type=' + this.downcom,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      } else if (this.downfilename == 1) {
        window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/f46493df3bd2a8433044219aa6fa24c8?id=' + this.model.id + '&type=' + this.downcom,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      } else if (this.downfilename == 2) {
        window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/f8577e689e9d8d0c9c8f24847a71e7c6?id=' + this.model.id + '&type=' + this.downcom,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      }

      // let filename = '导出'
      // let url = ''
      // let company = '青岛大金汇国际货运有限公司'
      // if (this.downcom == '0') {
      //   company = '青岛大金汇国际货运有限公司'
      // } else {
      //   company = '青岛海那威尔物流有限公司'
      // }
      //
      // if (this.downfiletype == '0') {
      //   if (this.downfilename == '0') {
      //     url = this.url.wtsWord
      //     filename = company + '-订舱委托书'
      //   } else if (this.downfilename == '1') {
      //     url = this.url.rhtzsWord
      //     filename = company + '-入货通知书'
      //   } else {
      //     url = this.url.dfbhWord
      //     filename = company + '-电放保函'
      //   }
      //   this.downForWord(this.downcom, url, filename)
      // } else {
      //   if (this.downfilename == '0') {
      //     url = this.url.wtsPdf
      //     filename = company + '-订舱委托书'
      //   } else if (this.downfilename == '1') {
      //     url = this.url.rhtzsPdf
      //     filename = company + '-入货通知书'
      //   } else {
      //     url = this.url.dfbhPdf
      //     filename = company + '-电放保函'
      //   }
      //
      //   this.downForPdf(this.downcom, url, filename)
      // }
      //
      // console.log(this.downfilename)
      // console.log(this.downfiletype)
      // console.log(this.downcom)

      this.selectDownVisible = false
    },
    // initFromData(){
    //
    // },
    /**
     * 订舱委托书word下载
     * **/
    downForWord(com, url, name) {
      let params = {
        id: this.model.id,
        type: com
      }
      downFile(url, params).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-word' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-word' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', name + '.docx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    /**
     * 订舱委托书pdf下载
     **/
    downForPdf(com, url, name) {
      let params = {
        id: this.model.id,
        type: com
      }
      downFile(url, params).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-pdf' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-pdf' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', name + '.pdf')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },

    isEditFunctino(val) {
      // console.log(val)
      this.isEdit = val
    },
    hideModal() {
      this.mainNumberVisible = false
      this.otherNumberVisible = false
    },
    showMainOff() {
      this.mainNumberVisible = true
    },
    showOtherOff() {
      this.otherNumberVisible = true
    },
    // /**
    //  * 新客户添加
    //  */
    // addItem(v) {
    //   this.customerModalVisible = true
    //   this.addCustomerFlag = v
    // },
    initDictData() {
      let a = Vue.ls.get('Login_Userinfo')
      // console.log(a)
      this.userName = a.username
      // console.log( this.userName)
      // ajaxGetDictItems('customer_info,title,id,sys_org_code=\'' + a.orgCode + '\'', null).then((res) => {
      //   if (res.success) {
      //
      //   }
      // })
      let param = { isLock: 0, pageSize: 99999 }
      getAction('/companydata/list', param).then(res => {
        console.log(res.result.records)
        let companyDataList = []
        for (let i = 0; i < res.result.records.length; i++) {
          companyDataList.push({
            value: res.result.records[i].companyName,
            text: res.result.records[i].companyName
          })
        }
        this.companyData = companyDataList
      })

      //获取收发通信息
      getAction('/box.shoufatong/shipContactsInfo/getall').then(res => {
        let shoufatongDataList = []
        for (let i = 0; i < res.result.length; i++) {
          shoufatongDataList.push({
            show: res.result[i].details,
            value: res.result[i].companyName,
            text: res.result[i].companyName
          })
        }
        this.shoufatongData = shoufatongDataList
      })

      // getAction('/box.info/jzxInfo/list', { 'sysOrgCode': a.orgCode, 'pageNo': 1, 'pageSize': 999 }).then(res => {
      //   let aaa = []
      //   res.result.records.map(item => {
      //     aaa.push({ 'text': item.containerNumber, 'value': item.id, 'status': item.status == 1 ? false : true })
      //   })
      //   this.boxDictOptions = aaa
      // })
      ajaxGetDictItems('total_type', null).then(res => {
        if (res.success) {
          res.result.forEach(item => {
            this.boxJsOptions.push(item.value)
          })
        }
      })
    },

    praseStrEmpty(str) {
      if (!str || str == 'undefined' || str == 'null') {
        return ''
      }
      return str
    },
    saveForm() {
      const that = this
      this.boxInfo.boxList = this.$refs.vTable.getTableData()
      let deleteData = this.$refs.vTable.getDeleteData()
      let deleteBoxNumIds = ''
      deleteData.forEach(c => {
        deleteBoxNumIds = deleteBoxNumIds + c.boxnum + ','
      })
      this.boxInfo.deleteBoxNumIds = deleteBoxNumIds
      // 触发表单验证
      this.form.validateFields((err, values) => {

        //TODO
        values['boxType'] = JSON.stringify(that.typeList)
        values['mainOffNumberJp'] = JSON.stringify(that.mainNum)
        values['otherOffNumberJp'] = JSON.stringify(that.otherNum)

        values['boxInfo'] = JSON.stringify(that.boxInfo)
        if (values['portDeparture']) {
          values['portDeparture'] = values['portDeparture'].value
        }
        if (values['receiveAddress']) {
          values['receiveAddress'] = values['receiveAddress'].value
        }
        if (values['destination']) {
          values['destination'] = values['destination'].value
        }
        if (values['portDestination']) {
          values['portDestination'] = values['portDestination'].value
        }
        if (values['placeDelivery']) {
          values['placeDelivery'] = values['placeDelivery'].value
        }
        if (values['prepaidAt']) {
          values['prepaidAt'] = values['prepaidAt'].value
        }
        if (values['arrivalPlace']) {
          values['arrivalPlace'] = values['arrivalPlace'].value
        }
        // values['consignor'] = JSON.stringify(that.consignor)
        // values['consignee'] = JSON.stringify(that.consignee)
        // values['notifier'] = JSON.stringify(that.notifier)
        // values['secNotifier'] = JSON.stringify(that.secNotifier)
        console.log('表单提交数据', values)
        console.log('表单提交数据typeList', that.typeList)

        for (var key in values) {
          // console.log('属性：' + key + ',值：' + values[key])
          values[key] = that.praseStrEmpty(values[key])
        }

        if (!err) {
          // 进行表单验证
          this.$refs.vTable.validateTable().then(errMap => {
            if (!errMap) {
              that.confirmLoading = true
              let httpurl = ''
              let method = ''
              if (!this.model.id) {
                httpurl += this.url.add
                method = 'post'
              } else {
                httpurl += this.url.edit
                method = 'put'
              }
              let formData = Object.assign(this.model, values)

              console.log('表单提交数据formData', formData)
              // console.log('表单提交数据', formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.model.id = res.result
                  // that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
              })
            } else {
              // 验证未通过，errMap里包含具体未验证通过的详情
              that.$message.error('箱列表数据不完整')

            }
          })

        }
      })
    },

    allclose() {
      this.$emit('close')
      // let that = this
      // if (!this.isshowdetail) {
      //   that.$emit('close')
      //
      // } else {
      //
      //   this.$confirm({
      //     title: '是否离开此页面？',
      //
      //     onOk() {
      //       that.$emit('close')
      //     },
      //     onCancel() {
      //       console.log('Cancel')
      //     }
      //   })
      // }
    },
    allOk() {
      this.$emit('ok')
    },
    changeCon(key) {
      if (this.selectkey == key) {
        return
      }
      var that = this
      var oldkey = this.selectkey
      if (oldkey == 1) {

        let formdata = JSON.stringify(that.form.getFieldsValue())

        if (formdata == this.formstr) {
          that.gotoPage(key)
        } else {
          this.$confirm({
            title: '修改的信息尚未保存，您确定要离开吗？',
            onOk() {
              that.gotoPage(key)
            },
            onCancel() {

              console.log(key)
              console.log(oldkey)
              that.selectkey = oldkey
              console.log('Cancel')
            }
          })

        }
      } else if (oldkey == 6) {
        that.gotoPage(key)
      } else {
        if (this.isEdit) {
          this.$confirm({
            title: '修改的信息尚未保存，您确定要离开吗？',
            onOk() {
              that.gotoPage(key)
            },
            onCancel() {

              console.log(key)
              console.log(oldkey)
              that.selectkey = oldkey
              console.log('Cancel')
            }
          })
        } else {
          this.gotoPage(key)
        }
      }

    },
    gotoPage(key) {
      console.log('key:' + key)
      this.selectkey = key
      this.isEdit = false
      if (key == 1) {
        this.handleaddInfo()
      } else if (key == 2) {
        this.handleBoxInfo()
      } else if (key == 3) {
        this.handleDeclare()
      } else if (key == 4) {
        this.handleBillMan()

      } else if (key == 5) {
        this.handleEnclosure()
      } else if (key == 6) {
        this.handleExpense()
      }
    },
    close() {
      this.boxModalVisible = false
      this.declareVisible = false
      this.billVisible = false
      this.enclosureVisible = false
      this.expenseVisible = false
      this.addVisible = false

    },
    handleaddInfo() {
      this.close()
      this.$emit('changeName', '基本信息')
      this.addVisible = true
      console.log(this.record)
      if (this.record) {
        this.edit(this.record)
      }
    },
    handleBoxInfo() {
      this.close()
      this.$emit('changeName', '箱货信息')
      this.$nextTick(() => {
        this.$refs.boxTypeForm.questId(this.modelid)
      })
      this.boxModalVisible = true
    },
    //报关
    handleDeclare() {

      this.close()
      this.$emit('changeName', '报关')
      this.$nextTick(() => {
        this.$refs.declareForm.questId(this.modelid)
      })
      this.declareVisible = true
    },
    //提单
    handleBillMan() {

      this.close()
      this.$emit('changeName', '提单管理')
      this.$nextTick(() => {
        this.$refs.billManageForm.questId(this.modelid)
        this.$refs.billManageForm.requestDetail(this.record)

      })
      this.billVisible = true
    },
    handleEnclosure() {

      this.close()
      this.$emit('changeName', '附件')
      this.enclosureVisible = true
    },
    handleExpense() {
      this.close()
      this.$emit('changeName', '费用录入')
      this.$nextTick(() => {
        this.$refs.expenseEntryForm.questId(this.modelid, this.model)
      })
      this.expenseVisible = true
    },
    removeType(index) {
      console.log(index)
      this.typeList.splice(index, 1)
    },
    addType(typeItem) {
      if (!typeItem.type || typeItem.type == '') {
        this.$message.error('类型不可为空!')

        return
      }
      if (!typeItem.number || typeItem.number == '') {

        this.$message.error('数量不可为空！')

        return
      }
      // let values ={};
      this.typeList.push({})

    },
    //计算英文金额
    handleBlur() {
      let total = this.form.getFieldValue('total')
      let totalType = this.form.getFieldValue('totalType')
      if (totalType && total) {
        this.form.setFieldsValue({ 'totalCap': this.intergernumber(total.toString()) + ' ' + totalType + ' ONLY' })
      }
    },
    //计算英文金额
    totalCapChange(v) {
      if (v) {
        let total = this.form.getFieldValue('total')
        this.form.setFieldsValue({ 'totalCap': this.intergernumber(total.toString()) + ' ' + v + ' ONLY' })
      } else {
        this.form.setFieldsValue({ 'totalCap': '' })
      }
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.confirmLoading = true
      this.visible = true
      this.record = record
      // this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'totalType', 'numberOfBill', 'totalCap', 'signBillAddress', 'signBillTime', 'prepaidAtDesc', 'arrivalPlaceDesc', 'receiveAddressDesc', 'closingTime', 'wareHouse', 'receiveAddress', 'shipmentMode', 'polRemark', 'podRemark', 'orderNumber', 'offerNumber', 'entrustCompany',
          'customerNumber', 'tradeClause', 'consignmentType', 'serviceType', 'bookingAgent',
          'foreignAgent', 'contractNumber', 'shipCompany', 'shipAgent', 'goodsValue', 'premium',
          'unNo', 'classNo', 'deadlineDeclaration', 'portDeparture', 'portDestination', 'transferPortCode',
          'boxSize', 'etd', 'cutOffTime', 'cutCheTime', 'mainOffNumber', 'otherOffNumber',
          'shipName', 'voyageNumber', 'wharf', 'consignor', 'consignee', 'notifier', 'secNotifier',
          'formForeignAgent', 'shipMarks', 'enName', 'total', 'totalGrossWeight', 'totalVolume', 'payType',
          'transportClause', 'formLading', 'bookingRemarks', 'allocationRemarks', 'operator', 'busPersonnel',
          'cusServiceStaff', 'placeDelivery', 'placeDeliveryDesc', 'destination', 'destinationDesc', 'station', 'customsBroker', 'goodsMark'))
        this.ishowMore = true
        this.typeList = JSON.parse(record.boxType)
        this.mainNum = JSON.parse(record.mainOffNumberJp)
        this.otherNum = JSON.parse(record.otherOffNumberJp)
        this.boxInfo = JSON.parse(record.boxInfo)
        if (record.portDeparture) {
          this.form.setFieldsValue({ 'portDeparture': { 'key': record.portDeparture, 'value': record.portDeparture } })
        } else {
          this.form.setFieldsValue({ 'portDeparture': {} })
        }
        if (record.receiveAddress) {
          this.form.setFieldsValue({
            'receiveAddress': {
              'key': record.receiveAddress,
              'value': record.receiveAddress
            }
          })
        } else {
          this.form.setFieldsValue({ 'receiveAddress': {} })
        }
        if (record.placeDelivery) {
          this.form.setFieldsValue({ 'placeDelivery': { 'key': record.placeDelivery, 'value': record.placeDelivery } })
        } else {
          this.form.setFieldsValue({ 'placeDelivery': {} })
        }
        if (record.prepaidAt) {
          this.form.setFieldsValue({ 'prepaidAt': { 'key': record.prepaidAt, 'value': record.prepaidAt } })
        } else {
          this.form.setFieldsValue({ 'prepaidAt': {} })
        }
        if (record.arrivalPlace) {
          this.form.setFieldsValue({ 'arrivalPlace': { 'key': record.arrivalPlace, 'value': record.arrivalPlace } })
        } else {
          this.form.setFieldsValue({ 'arrivalPlace': {} })
        }
        if (record.destination) {
          this.form.setFieldsValue({ 'destination': { 'key': record.destination, 'value': record.destination } })
        } else {
          this.form.setFieldsValue({ 'destination': {} })
        }
        if (record.portDestination) {
          this.form.setFieldsValue({
            'portDestination': {
              'key': record.portDestination,
              'value': record.portDestination
            }
          })
        } else {
          this.form.setFieldsValue({ 'portDestination': {} })
        }
      })
      // this.consignor = JSON.parse(record.consignor)
      // this.consignee = JSON.parse(record.consignee)
      // this.notifier = JSON.parse(record.notifier)
      // this.secNotifier = JSON.parse(record.secNotifier)
      this.modelid = record.id
      this.confirmLoading = false

      //将表单的值写入
      this.$nextTick(() => {
        this.formstr = JSON.stringify(this.form.getFieldsValue())
      })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    // popupCallback(row) {
    //   this.form.setFieldsValue(pick(row, 'polRemark', 'podRemark', 'orderNumber', 'offerNumber', 'entrustCompany', 'customerNumber', 'tradeClause',
    //     'consignmentType', 'serviceType', 'bookingAgent', 'foreignAgent', 'contractNumber', 'shipCompany',
    //     'shipAgent', 'goodsValue', 'premium', 'unNo', 'classNo', 'deadlineDeclaration', 'portDeparture',
    //     'portDestination', 'transferPortCode', 'boxSize', 'etd', 'cutOffTime', 'cutCheTime',
    //     'mainOffNumber', 'otherOffNumber', 'shipName', 'voyageNumber', 'wharf', 'consignor', 'consignee', 'notifier', 'secNotifier',
    //     'formForeignAgent', 'shipMarks', 'enName',
    //     'total', 'totalType', 'totalGrossWeight', 'totalVolume', 'payType', 'transportClause', 'formLading',
    //     'bookingRemarks', 'allocationRemarks', 'operator', 'busPersonnel', 'cusServiceStaff', 'placeDelivery', 'destination', 'station', 'customsBroker', 'goodsMark'))
    // },
    searchPort(val) {
      let params = { name: val }
      getAction(this.getPortDataUrl, params).then(res => {
        if (res.code == 200) {
          let data = []
          res.result.forEach(item => {
            data.push({
              value: item.wzm,
              text: item.showText
            })
          })
          this.portData = data
        }
      })
    },
    //起运港选择后回显
    portDataChangePol(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'portDeparture': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'polRemark': portEnName })
    },
    //收货地选择后回显
    portDataChangeReceiveAddress(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'receiveAddress': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'receiveAddressDesc': portEnName })
    },
    //交货地选择后回显
    portDataChangePlaceDelivery(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'placeDelivery': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'placeDeliveryDesc': portEnName })
    },
    //预付地点选择后回显
    portDataChangePlacePrepaidAt(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'prepaidAt': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'prepaidAtDesc': portEnName })
    },
    //到付地点选择后回显
    portDataChangePlaceArrivalPlace(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'arrivalPlace': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'arrivalPlaceDesc': portEnName })
    },
    //目的地选择后回显
    portDataChangePlaceDestination(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'destination': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'destinationDesc': portEnName })
    },
    //目的港选择后回显
    portDataChangePod(value) {
      console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'portDestination': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'podRemark': portEnName })
    },
    //数字金额转英文大些
    intergernumber(a) {
      let arr1 = new Array('', ' thousand', ' million', ' billion')

      let b = a.length
      let f = 0
      let h = 0
      let g = ''
      let e = Math.ceil(b / 3)
      let k = b - e * 3
      let num3 = ''
      let strEng = ''
      for (f = k; f < b; f += 3) {
        ++h
        num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
        strEng = this.English(num3)
        if (strEng != '') {
          if (g != '') g += ','
          g += this.English(num3) + arr1[e - h]
        }
      }
      return 'SAY ' + g.toUpperCase()
    },

    English(a) {
      let
        arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'),
        arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'),
        arr4 = new Array('ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen')

      let strRet = ''
      if (a.length == 3 && a.substr(0, 3) != '000') {
        if (a.substr(0, 1) != '0') {
          strRet += arr3[a.substr(0, 1)] + ' hundred'
          if (a.substr(1, 2) != '00') strRet += ' and '
        }
        a = a.substring(1)
      }
      if (a.length == 2) {
        if (a.substr(0, 1) == '0') {
          a = a.substring(1)
        } else if (a.substr(0, 1) == '1') {
          strRet += arr4[a.substr(1, 2)]
        } else {
          strRet += arr2[a.substr(0, 1)]
          if (a.substr(1, 1) != '0') strRet += '-'
          a = a.substring(1)
        }
      }
      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
      return strRet
    },
    //查看场站数据
    showStationData() {
      let mainOffNumber = this.form.getFieldValue('mainOffNumber')
      let station = this.form.getFieldValue('station')
      if (mainOffNumber && station) {
        window.open('http://www.sdsmartlogistics.com/FindClass/YD_BLQueryGrid.aspx?blno=' + mainOffNumber,
          'windowname',
          'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      } else {
        this.$warning({ title: '提示', content: '场站和主单号不能为空' })
      }

    },
    //引入场站数据
    getStationData() {
      let mainOffNumber = this.form.getFieldValue('mainOffNumber')
      let station = this.form.getFieldValue('station')
      if (mainOffNumber && station) {
        this.confirmLoading = true
        let param = { blno: mainOffNumber }
        getAction('/box.common/dynamic/boxinfo', param).then(res => {
          if (res.success == false) {
            this.$warning({ title: '提示', content: res.message })
          } else {
            if (res.result.length == 0) {
              this.$warning({ title: '提示', content: '提单号不存在或装货信息为空' })
            } else {
              this.boxInfo.boxList = this.$refs.vTable.getTableData()
              this.boxInfo.boxList.push.apply(this.boxInfo.boxList, res.result)
            }
          }
          this.confirmLoading = false
        }).catch(() => {
          this.$warning({ title: '提示', content: '获取超时请重试' })
          this.confirmLoading = false
        })
      } else {
        this.$warning({ title: '提示', content: '场站和主单号不能为空' })
      }

    },
    boxJsFilterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase() >= input.toUpperCase()
      )
    },
    fChange(value, option) {
      this.form.setFieldsValue({ 'consignor': option.componentOptions.propsData.label })
    },
    sChange(value, option) {
      this.form.setFieldsValue({ 'consignee': option.componentOptions.propsData.label })
    },
    tChange(value, option) {
      this.form.setFieldsValue({ 'notifier': option.componentOptions.propsData.label })
    },
    deChange(value, option) {
      this.form.setFieldsValue({ 'secNotifier': option.componentOptions.propsData.label })
    },
    gwChange(value, option) {
      this.form.setFieldsValue({ 'formForeignAgent': option.componentOptions.propsData.label })
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/deep/ .ant-form-item-label {
  text-align: left;
}
</style>